<template>
  <div class="first">
    <div class="div">
      <div class="top">
        <div class="btns">
          <h3 @click="addfenlei">新增分类</h3>
        </div>
      </div>

      <div class="neirong">
        <el-tree
          :data="tableData"
          node-key="names"
          highlight-current
          :props="{label: 'names',children: 'depositoryDtoList'}"
          @current-change="handleNodeClick"
          v-loading="threeloading"
        ></el-tree>
      </div>
    </div>

    <div class="xinxi">
      <div class="top">
        <div class="btn">
          <h3 @click="xinxi" :class="xinxishow==true ? 'select':'' ">分类信息</h3>
          <h3 @click="zishebei" :class="shebeishow==true ? 'select':'' ">子设备</h3>
        </div>
      </div>
      <div class="xinxi-list" v-if="xinxishow">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="分类编码">
            <el-input v-model="form.tid" disabled></el-input>
          </el-form-item>
          <el-form-item label="分类名称">
            <el-input v-model="form.names"></el-input>
          </el-form-item>
          <el-form-item class="btn-s">
            <el-button size="small" @click="del">删除</el-button>
            <el-button size="small" type="primary" @click="updateClassify">保存</el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-dialog title="删除分类" :visible.sync="delshow" width="40%">
        <div class="product">
          <p>确定删除此项吗？</p>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="quxiao">取 消</el-button>
          <el-button size="small" type="primary" @click="queding">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog title="新增分类" :visible.sync="classifyshow" width="30%" :close-on-click-modal="false">
        <el-form ref="add" :model="add" label-width="80px">
          <el-form-item label="分类名称">
            <el-input v-model="add.names"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="small" @click="classifyshow = false">取消</el-button>
            <el-button size="small" type="primary" @click="saveClass">保存</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

      <div class="xinghao" v-if="shebeishow">
        <div class="zd3">
          <div class="zd3-title">
            <el-button size="small" type="primary" @click="addPermission">新增</el-button>
          </div>
          <div class="zd3-btm">
            <el-table
              :data="zichanData"
              style="width: 100%;border-radius: 8px;"
              :show-header="showHeader"
              v-loading="loading"
            >
              <el-table-column type="index" align="center" label="序号" width="80" />
              <el-table-column align="center" prop="canshu" width="150" label="技术参数" />
              <el-table-column align="center" prop="names" width="120" label="名称" />
              <el-table-column align="center" prop="snCode" width="120" label="SN编码" />
              <el-table-column align="center" prop="remarks" label="备注" />
              <el-table-column align="center" width="120" label="操作" fixed="right">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="write(scope.row,scope.$index)">编辑</el-button>
                  <el-popconfirm
                    placement="top"
                    hideIcon
                    title="是否要删除此行？"
                    @onConfirm="deleteRow(scope.row)"
                  >
                    <el-button type="text" size="small" slot="reference">删除</el-button>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              background
              align="right"
              :page-size="50"
              layout="prev, pager, next"
              :total="total"
              @current-change='goPage'
              @prev-click="goPrev"
              @next-click="goNext"
            />
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="新增子设备" :visible.sync="zishebeishow" width="30%" :close-on-click-modal="false">
      <div class="change">
        <p>
          <span>技术参数</span>
          <el-input v-model="tempData.canshu" :disabled="islook" type="textarea" class="userselect" placeholder="请输入技术参数" />
        </p>
        <p>
          <span>名称</span>
          <el-input v-model="tempData.names" :disabled="islook" type="text" class="userselect" placeholder="请输入名称" />
        </p>
        <p>
          <span>SN编码</span>
          <el-input v-model="tempData.snCode" :disabled="islook" type="text" class="userselect" placeholder="请输入SN编码" />
        </p>
        <p>
          <span>备注</span>
          <el-input v-model="tempData.remarks" :disabled="islook" type="textarea" class="userselect" placeholder="请输入备注" />
        </p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="zishebeishow = false">取消</el-button>
        <el-button type="primary" @click="savezifenlei">确定</el-button>
      </div>
    </el-dialog>
    
  </div>
</template>

<script>
// import { getCangku,addCangku,updateCangku,deleteCangku,addOneClassify,addTwoClassify,updateTwoClassify,deleteTwoClassify } from '@/api/cangku'
import { getziFenlei,addziFenlei,updateziFenlei,deleteziFenlei,zishebeiList,deleteZishebei,addZishebei,updateZishebei } from '@/api/caigou'
import jsonEditorVue from '@/views/components-demo/json-editor.vue';
export default {
  props:{
    tempId: {
      type: String,
      default: '123'
    },
    writeData:{
      type: Object,
      default: () => {}
    }
  },
  watch:{
    tempId(newValue,oldValue){
      console.log('111',newValue,oldValue)
      this.getList(newValue)
    },
    writeData(newValue,oldValue){
      console.log('222',newValue,oldValue)
    }
  },
  data() {
    return {
      classifyshow: false,
      loading: true,
      total:1,
      delshow: false,
      threeloading: true,   //分类加载
      num: 1,
      form: {},
      id: "",
      add: {},
      xinxishow: true,
      shebeishow: false,
      searchData:{},
      tableData: [],  //表格数据
      zichanData: [],  //资产数据
      tempData:{},   //编辑子设备数据
      zishebeishow: false,
      writeOradd: -1   //编辑还是新增 -1 新增，1编辑
    };
  },
  mounted(){
    console.log('编辑数据',this.writeData)
  },
  methods: {
    // 点击分类菜单获取对应商品
    handleNodeClick(data, checked, node) {
      console.log(data)
//    this.add.parentId = data.tid
      this.form = {...data}
      this.getZishebei(data.tid)
    },
    addfenlei() {
      console.log("分类");
      this.classifyshow = true;
      console.log(this.classifyshow)
    },
    addquxiao() {
      this.addshow = false;
    },
    // 修改分类
    updateClassify(){
      console.log(this.form)
      updateziFenlei({names: this.form.names,tid: this.form.tid}).then(res => {
        console.log(res)
        this.$message({
          message: '修改成功！',
          type: 'success'
        })
        this.getList(this.tempId)
      })
    },
    // 保存分类
    saveClass() {
      console.log(this.add);
      console.log(this.tempId)
      this.add.parentId = this.tempId
      console.log(this.add)
      addziFenlei(this.add).then(res => {
        console.log('新增一级分类',res)
        this.$message({
          message: '新增成功！',
          type: 'success'
        })
        this.classifyshow = false
        this.addshow = false;
        this.add = {}
        this.getList(this.tempId)
      })
    },
    handleChange(value) {
      console.log(value);
    },
    /**
     * 基本信息分类
     */
    xinxi() {
      this.xinxishow = true;
      this.shebeishow = false;
    },
    /**
     * 子设备列表
     */
    zishebei() {
      if(JSON.stringify(this.form) === "{}"){
        this.$message({
          message:'请选择子设备分类！',
          type: 'warning'
        })
        return
      }
      this.xinxishow = false;
      this.shebeishow = true;
    },
    del() {
      this.delshow = true;
    },
    quxiao() {
      this.delshow = false;
    },
    /**
     * 获取子设备
     */
    getZishebei(id){
      this.loading = true
      return new Promise((resolve) => {
        // let temp1 = null
        zishebeiList({parentIds:id}).then(res => {
          console.log(res)
          this.zichanData = res.data
          this.loading = false
          resolve(res.data)
          // temp1 = res.data
        })
        // resolve(temp1)
      })
    },
    /**
     * 编辑子设备
     */
    write(item,index){
      this.zishebeishow = true
      this.writeOradd = index
      this.tempData = {...item}
    },
    /**
     * 新增子设备
     */
    addPermission(){
      if(JSON.stringify(this.form) !== "{}"){
        this.zishebeishow = true
        this.writeOradd = -1
        this.tempData = {}
      }else{
        this.$message({
          message: '请先选择分类',
          type: 'warning'
        })
      }
    },
    /**
     * 保存编辑子设备
     */
    savezifenlei(){
      if(this.writeOradd === -1){
        this.tempData.parentIds = this.form.tid
        addZishebei(this.tempData).then(res => {
          console.log(res)
          this.getZishebei(this.form.tid).then(res => {
            this.setshebei(res)
          })
          this.zishebeishow = false
        })
      }else{
        updateZishebei(this.tempData).then(res => {
          console.log(res)
          this.getZishebei(this.form.tid).then(res => {
            this.setshebei(res)
          })
          this.zishebeishow = false
        })
      }
      
    },
    /**
     * 每次生成子设备或者修改分类，重构设备
     */
    setshebei(res){
      console.log('编辑对比数据',this.writeData)
      // 获取所有子设备列表,假如获取到了所有数据res.data
      // 判断是否有子设备数据，没有直接push新增，有继续判断
      if(this.writeData.subtypeDtoList && this.writeData.subtypeDtoList.length){
        console.log('有原始数据')
        // 拿资产原始数据来跟现有子设备分类比较，有当前分类，直接更新list,没有则push
        let flag1 = this.writeData.subtypeDtoList.findIndex(item => item.names === this.form.names)
        console.log(flag1,'原始数据中有没有当前新增得分类')
        if(flag1 === -1){
          console.log('原始数据中nohave当前新增得分类')
          this.writeData.subtypeDtoList.push({
            names: this.form.names,
            list: res
          })
        }else{
          console.log(flag1,'原始数据中have当前新增得分类')
          this.writeData.subtypeDtoList[flag1].list = res
        }
      }else{
        console.log('没有有原始数据')
        this.writeData.subtypeDtoList = []
        this.writeData.subtypeDtoList.push({
          names: this.form.names,
          list: res
        })
      }
      console.log('更新重构子设备',this.writeData.subtypeDtoList)
      sessionStorage.setItem('writeZishebei',JSON.stringify(this.writeData))
    },
    /**
     * 删除分类
     */
    queding() {
      this.delshow = false;
      console.log("删除");
      console.log(this.form)
      if(this.form.tid && this.form.names){
        console.log(this.form)
        deleteziFenlei(this.form.tid).then(res => {
          console.log(res)
          this.$message({
            message: '删除成功!',
            type: 'success'
          })
          this.form = {}
          this.getList()
        })
      }else{
        this.$message({
          message: '请先选择要删除的分类!',
          type: 'warning'
        })
      }
      
    },
    getList(id) {
      getziFenlei({parentId: id}).then(res => {
        console.log('获取分类')
        console.log(res)
        this.tableData = res.data
        this.threeloading = false
      })
    },
  },
};
</script>
<style scoped lang="scss">
/deep/.el-tree-node__content:hover {
  background-color: #18a05e;
  border-radius: 3px;
  color: #fff;
}
/deep/.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
  background-color: #18a05e;
  border-radius: 3px;
  color: #fff;
}
/deep/.el-form-item {
  color: black;
  margin: 15px 0 !important;
}
/deep/.el-dialog__body {
    padding: 5px 20px;
}
/deep/.el-cascader {
  width: 100%;
}
.change {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  border-radius: 8px;
  // padding: 20px;
  > p {
    width: 100%;
    font-size: 14px;
    display: flex;
    align-items: center;
    color: #333;
    /deep/.el-input__inner {
      // width: inherit;
      background: none;
      height: 32px;
      // line-height: 32px;
      color: #333;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding: 0 25px;
    }
    /deep/.el-input__icon {
      line-height: 32px;
    }
    .userselect {
      // max-width: 250px;
      flex: 1;
    }

    > span {
      display: block;
      width: 120px;
      text-align: right;
      padding-right: 15px;
    }
    > input {
      width: inherit;
      flex: 1;
      height: 32px;
      border-radius: 3px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding-left: 10px;
      color: #333;
    }
  }
}
.el-tree {
  position: relative;
  cursor: default;
  background: #fff;
  width: 90%;
  color: #606266;
}
.el-menu-vertical-demo {
  width: 100%;
}
.first {
  padding: 20px 20px 20px 0;
  border-radius: 0 0 10px 10px;
  display: flex;
  flex: 1;
  background-color: #fff;
}
.div {
  width: 25%;
  height: 520px;
  overflow-x: hidden;
  overflow-y: auto;
  border-right: 1px solid #ccc;
}
.top {
  background-color: white;
  height: 50px;
  margin-bottom: 10px;
  margin-left: 20px;
}
.btns {
  display: flex;
  align-items: center;
  margin-left: 10px;
}
.btns h3 {
  padding: 5px 10px;
  border-radius: 3px;
  background: #18a05e;
  // border-radius: 3px;
  color: #fff;
  font-size: 14px;
  font-weight: 100;
  text-align: center;
  cursor: pointer;
  margin-top: 10px;
}
.neirong {
  margin-left: 20px;
  display: flex;
}
.xinxi {
  width: 75%;
  padding-left: 25px;
}
.btn {
  display: flex;
}
.btn h3 {
  margin-right: 10px;
  width: 64px;
  height: 32px;
  border-radius: 3px;
  font-size: 14px;
  line-height: 32px;
  font-weight: 100;
  text-align: center;
  cursor: pointer;
  margin-top: 10px;
}
.select {
  color: #18a05e;
  border-bottom: 1px solid #18a05e;
}
.xinxi-list {
  // border-left: solid 1px silver;
}
.zd3-title {
	height: 70px;
	display: flex;
	align-items: center;
	padding: 0 20px;
	position: relative;
	background: #ffffff;
	border-radius: 8px;
	border: 1px solid rgba(0, 0, 0, 0.1);

	> p {
		font-size: 14px;
		color: #333;
		margin-right: 20px;

		> span {
			padding-right: 20px;
		}

		> input {
			width: 150px;
			height: 32px;
			// background: #ccc;
			border-radius: 3px;
			border: 1px solid #ccc;
			padding-left: 10px;
			color: #333;
		}
	}

	> h3 {
		// width: 64px;
		height: 32px;
		background: #18a05e;
		border-radius: 3px;
		margin: 0 30px 0 0;
		padding: 0 15px;
		color: #fff;
		font-size: 14px;
		line-height: 32px;
		font-weight: 100;
		text-align: center;
		cursor: pointer;
	}

	> h4 {
		padding: 0 15px;
		height: 32px;
		border-radius: 3px;
		border: 1px solid rgba(0, 0, 0, 0.1);
		color: #333;
		font-size: 14px;
		line-height: 32px;
		font-weight: 100;
		text-align: center;
		cursor: pointer;
	}
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #18a05e;
  color: #fff;
}
.zd3-btm /deep/.btn-prev:after {
  content: "上一页";
}
.zd3-btm /deep/.btn-next:before {
  content: "下一页";
}
.zd3-btm /deep/.btn-prev,
.zd3-btm /deep/.btn-next {
  width: 65px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.zd3-btm {
  background: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 10px;
  overflow: hidden;
  &-title {
    display: flex;
    align-items: center;
    height: 70px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: #ffffff;
    > p {
      text-align: center;
      font-size: 16px;
      color: #333;
    }
  }
  .el-pagination {
		white-space: nowrap;
		padding: 15px 5px;
		color: #303133;
		font-weight: bold;
	}
  .addDate {
    margin: 20px 32px 10px 32px;
    height: 32px;
    border-radius: 3px;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    border: 1px dashed rgba(0, 0, 0, 0.25);
  }
  .el-button--text {
    margin: 0 10px;
  }
}
</style>